/*
  学习目标：样式处理
  1. 行内样式
  2. 外部样式

*/

import React from 'react';
import ReactDOM from 'react-dom';
// 2.2 导入样式文件
import './base.css';

const divNode = (
  <div>
    {/* 字体红色, 大小80px */}
    {/* 语法: style={css对象} */}
    {/* 注意:
      1. 不支持连字符属性名, 👍要写为驼峰式属性名
      2. 当单位为px时, 可以省略为数字
    */}
    <h1 style={{ color: 'red', fontSize: 80 }}>hello React</h1>
    {/* 2.3 分配类名 */}
    <div className="box">我是外部样式</div>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
